<template>
    <div id="root">
        <Headers>{{onename}}-{{twoname}}</Headers>
        <div id="searchlist-fix">
            <div id="searchlist-classifyone">
                <div>综合<span class="fa fa-caret-down"></span></div>
                <div>销量</div>
                <div>价格<span class="fa fa-caret-down"></span></div>
                <div>筛选<span class="fa fa-filter"></span></div>
            </div>
            <div id="searchlist-classifytwo">
                <div>京东配送</div>
                <div>品牌<span class="fa fa-caret-down"></span></div>
                <div>风格<span class="fa fa-caret-down"></span></div>
                <div>鞋面材料<span class="fa fa-caret-down"></span></div>
            </div>
        </div>
        <div id="searchlist-main">
            <router-link class="searchlist-list" v-for="(s,i) in searchListThen.data" :key="i" :to="'/product/'+s._id">
                <div class="searchlist-list-left"><img :src="s.goodsOfImg[0]"></div>
                <div class="searchlist-list-right">
                    <div class="searchlist-list-right-one">{{s.nameOfGoods}}</div>
                    <div class="searchlist-list-right-two">
                        <div>标签</div>
                        <div>￥{{s.price}}.00</div>
                        <span>6条评价 好评100%</span>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>
<script>
import Headers from "../components/Headers.vue";
import {mapState} from "vuex";
export default {
    components:{ Headers },
    data:function(){
        return {
            onename:null,
            twoname:null,
        }
    },
    mounted:function(){
        this.onename = this.$route.params.onename;
        this.twoname = this.$route.params.twoname;
        this.$store.dispatch("requestSearchList",this.$route.params);
    },
    computed:{
        ...mapState([
            "searchListThen"
        ])
    }
}
</script>
<style scoped>
    #searchlist-fix{
        position: fixed;
        top: 45px;
        width: 100%;
        
        background-color: #fff;

    }
    #searchlist-classifyone{
        width: 100%;
         height: 22px; 
        display: flex;
        border-top:solid 1px #666666;
        border-bottom: solid 1px #666666;
        text-align: center;
        background-color: ghostwhite;
        margin-top: 10px;
        
    }
    #searchlist-classifyone div{
        width: 25%;
    }
    #searchlist-classifytwo{
        display: flex;
        width: 100%;
        height: 35px;
        background-color: ghostwhite;
        border-bottom: solid 1px #666666;
        text-align: center;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #searchlist-classifytwo div{
         width: 20%;
         background-color: #A4D3EE; 
         border-radius: 2px;
         font-size: 14px;
         margin:7px 3vw;
         
    }
    #searchlist-main{
        margin-top: 131px
    }
    .searchlist-list{
        display: flex;
        background-color: white;
    }
    .searchlist-list-left{
        width: 30vw;
        height: 30vw;
        padding: 5px;
    }
    .searchlist-list-left img{
        width: 100%;
        height: 100%;
    }
    .searchlist-list-right{
        width: 70vw;
        height: 30vw;
        border-bottom: solid 1px #cccccc;
    }
    .searchlist-list-right-one{
        width: 100%;
         height: 40%; 
         text-overflow: ellipsis;
        font-size: 14px;
         white-space: wrap; 
         overflow: hidden; 
       
    }
    .searchlist-list-right-two{
        width: 100%;
        height: 60%;
        overflow: hidden;
    }
    .searchlist-list-right-two div:nth-of-type(1){
        font-size: 10px;
        background-color: #A4D3EE; 
        width: 20%;
        text-align: center;
    }
    .searchlist-list-right-two div:nth-of-type(2){
        font-size: 16px;
        color: red;
    }
    .searchlist-list-right-two span{
        font-size: 10px;
        color: gray;
    }
    a{
        text-decoration: none;
        color: inherit;
    }
</style>